<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    .logo {
      display: flex;
      justify-content: space-around;
      padding: 20px 0;
      margin: 0;
      font-size: 20px;
      color: #ffffff;
    }

    .container {
      background-color: rgb(169, 216, 254);
      height: 100vh;
    }

    .left-sub {
      padding: 0;
      height: 100%;
    }

    .content {
      height: 100%;
    }

    .nav-link {
      color: #ffffff;
    }

    .nav-link:hover {
      background-color: rgb(90, 161, 219);
      color: white;
    }

    .nav-link+.nav-sub {
      display: none;
    }

    .nav>div:hover .nav-sub {
      display: flex;
    }

    #newpage {
      width: 100%;
      height: 100%;
    }

    .right-cont {
      padding: 0;
    }
  </style>
</head>

<body>
  <div class="container" style="max-width: none;">
    <div class="row content">
      <div class="col-2 left-sub bg-dark">
        <nav id="navbar-example3" class="h-100 flex-column align-items-stretch">
          <div class="row logo">
            <div class="col-5">
              <img src="./images/tooth.png" alt="Logo" width="100%">
            </div>
            <div class="col-11">
              <h4 class="text text-center">米菲兔口腔</h4>
            </div>
          </div>
          <nav class="nav nav-pills flex-column">
            <div>
              <a class="nav-link">首页</a>
            </div>
            <div>
              <a class="nav-link" onclick="changeIframe('./user.html')">用户管理</a>
            </div>
            <div>
              <a class="nav-link" onclick="changeIframe('./patient.html')">患者管理</a>
            </div>
            <div>
              <a class="nav-link" onclick="changeIframe('./doctor.html')">医生管理</a>
            </div>
            <div>
              <a class="nav-link" onclick="changeIframe('./department.html')">科室管理</a>
            </div>
            <div>
              <a class="nav-link" onclick="changeIframe('./branch.html')">分院管理</a>
            </div>
            <!-- <div>
              <a class="nav-link">预约管理</a>
              <nav class="nav nav-pills flex-column nav-sub bg-pink">
                <a class="nav-link ms-3 my-1" href="javascript:void(0)" onclick="changeIframe('')"></a>
                <a class="nav-link ms-3 my-1" href="#item-1-2"></a>
              </nav>
            </div> -->
          </nav>
        </nav>
      </div>
      <div class="col-10 right-cont">
        <iframe src="" frameborder="0" id="newpage"></iframe>
      </div>
    </div>
  </div>
  <script>
    function changeIframe(url) {
      newpage.src = url;
    }
  </script>
</body>

</html>